<template>
  <div class="wrapper">
    <!--header-->
    <Header name="商家信息" />

    <!--商家logo-->
    <div class="business-logo">
      <img :src="business.businessImg">
    </div>
    <!--商家信息-->
    <div class="business-info">
      <h1>{{ business.businessName }}</h1>
      <p>&yen;{{ business.starPrice }}起送 &yen;{{ business.deliveryPrice }}配送</p>
      <p>{{ business.businessExplain }}</p>
    </div>

    <!--选项栏-->
    <nav class="navbar navbar-expand-sm bg-light justify-content-center">
      <ul class="navbar-nav">
        <!-- <li class="nav-item">
          <a class="nav-link">点餐</a>
        </li> -->
        <li class="nav-item">
          <a class="nav-link" @click="toComment(businessId)">前往评论</a>
        </li>
      </ul>
    </nav>
    <hr style="color: black; margin: 0;">
    <!--食品列表-->
    <ul class="food">
      <li v-for="(item, index) in foodArr">
        <div class="left">
          <img :src="item.foodImg">
          <div class="info">
            <h3>{{ item.foodName }}</h3>
            <p>{{ item.foodExplain }}</p>
            <p>&yen;{{ item.foodPrice }}</p>
          </div>
        </div>
        <div class="right">
          <div><i class="fa fa-minus-circle" @click="minus(index)" v-if="item.quantity != 0"></i></div>
          <p><span v-if="item.quantity != 0">{{ item.quantity }}</span></p>
          <div><i class="fa fa-plus-circle" @click="add(index)"></i></div>
        </div>
      </li>
    </ul>

    <div class="bottommargin"></div>

    <!--购物车部分-->
    <div class="cart">
      <div class="left">
        <div class="icon" :style="totalQuantity == 0 ? 'background-color:#505051;' : 'background-color:#3190E8;'">
          <i class="fa fa-shopping-cart"></i>
          <div class="quantity" v-if="totalQuantity != 0">{{ totalQuantity }}</div>
        </div>
        <div class="info">
          <p>&yen;{{ totalPrice }}</p>
          <p>另需配送费{{ business.deliveryPrice }}元</p>
        </div>
      </div>
      <div class="right">
        <!--不够配送费-->
        <div class="twosituations" v-if="totalSettle < business.starPrice"
          style="background-color: #535356;cursor: default;">
          &yen;{{ business.starPrice }}起送
        </div>
        <!--够配送费-->
        <div class="twosituations" @click="toOrder" v-if="totalSettle >= business.starPrice">
          去结算
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Header from "../components/Header.vue";

export default {
  name: "BusinessInfo",
  data() {
    return {
      businessId: this.$route.query.businessId,
      business: {},
      foodArr: [],
      user: {}
    }
  },
  components: {
    Header,
  },
  created() {
    this.user = this.$getSessionStorage('user');

    //根据businessId查询商家信息
    let url = `BusinessController/getBusinessById/${this.businessId}`;
    this.$axios.get(url).then(response => {
      this.business = response.data.result;
      this.foodArr = this.business.foodList;
      for (let i = 0; i < this.foodArr.length; i++) {
        this.foodArr[i].quantity = 0;
      }

      //如果已登录，需要查询购物车是否已经选购食品
      if (this.user != null) {
        this.listCart();
      }
    }).catch(error => {
      console.error(error);
    });

  },
  methods: {
    listCart() {
      let url = `CartController/listCart/${this.user.userId}/${this.businessId}`;
      this.$axios.get(url).then(response => {
        let cartArr = response.data.result;
        //遍历所有食品列表
        for (let foodItem of this.foodArr) {
          foodItem.quantity = 0;
          for (let cartItem of cartArr) {
            if (cartItem.foodId == foodItem.foodId) {
              foodItem.quantity = cartItem.quantity;
            }
          }
        }
        this.foodArr.sort();
      }).catch(error => {
        console.error(error);
      });
    },
    add(index) {
      //首先登录验证
      if (this.user == null) {
        this.$router.push({ path: '/login' });
        return;
      }

      if (this.foodArr[index].quantity == 0) {
        //insert
        this.saveCart(index);
      }
      else {
        //update
        this.updateCart(index, 1);
      }
    },
    minus(index) {
      //首先登录验证
      if (this.user == null) {
        this.$router.push({ path: '/login' });
        return;
      }

      if (this.foodArr[index].quantity > 1) {
        //update
        this.updateCart(index, -1);
      }
      else {
        //delete
        this.removeCart(index);
      }
    },
    saveCart(index) {
      let url = `CartController/saveCart/${this.user.userId}/${this.businessId}/${this.foodArr[index].foodId}`;
      this.$axios.post(url).then(response => {
        if (response.data.result == 1) {
          //此食品数量要更新为1；
          this.foodArr[index].quantity = 1;
          this.foodArr.sort();
        } else {
          alert('向购物车中添加食品失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },
    updateCart(index, num) {
      let url = `CartController/updateCart/${this.user.userId}/${this.businessId}/${this.foodArr[index].foodId}/${this.foodArr[index].quantity + num}`;
      this.$axios.put(url).then(response => {
        if (response.data.result == 1) {
          //此食品数量要更新；
          this.foodArr[index].quantity += num;
          this.foodArr.sort();
        } else {
          alert('向购物车中更新食品失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },
    removeCart(index) {
      let url = `CartController/removeCart/${this.user.userId}/${this.businessId}/${this.foodArr[index].foodId}`;
      this.$axios.delete(url).then(response => {
        if (response.data.result == 1) {
          //此食品数量要更新；
          this.foodArr[index].quantity = 0;
          this.foodArr.sort();
        } else {
          alert('向购物车中删除食品失败！');
        }
      }).catch(error => {
        console.error(error);
      });
    },
    toOrder() {
      this.$router.push({ path: '/orders', query: { businessId: this.business.businessId } });
    },


    toComment() {
      this.$router.push({ path: '/error403' });
    },
  },
  computed: {
    //食品总价格
    totalPrice() {
      let total = 0;
      for (let item of this.foodArr) {
        total += item.quantity * item.foodPrice;
      }
      return total;
    },
    //食品总数量
    totalQuantity() {
      let quantity = 0;
      for (let item of this.foodArr) {
        quantity += item.quantity;
      }
      return quantity;
    },
    //结算价格
    totalSettle() {
      return this.totalPrice + this.business.deliveryPrice;
    }
  }
}
</script>

<style scoped>
/**************************总容器**************************/
.wrapper {
  width: 100%;
}

.wrapper .bottommargin {
  width: 100%;
  height: 16vw;
}

/**************************商家logo**************************/
.wrapper .business-logo {
  width: 100%;
  height: 35vw;
  margin-top: 12vw;

  display: flex;
  justify-content: center;
  align-items: center;
}

.wrapper .business-logo img {
  width: 30vw;
  height: 30vw;
  border-radius: 5px;
}

.wrapper .business-info {
  width: 100%;
  height: 20vw;

  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}


.wrapper .business-info h1 {
  font-size: 5vw;
}

.wrapper .business-info p {
  font-size: 3vw;
  color: #666;
  margin-top: 1vw;
}

/**************************选项栏**************************/
nav {
  font-size: 4vw;
  background-color: #0097FF;
  height: 13vw;
}

.nav-link {
  color: #999;
}

.nav-link:hover {
  color: #0097EF;
}

/**************************食品列表**************************/
.wrapper .food {
  width: 96%;
  margin-left: 2%;
}

.wrapper .food li {
  height: 18vw;
  width: 100%;
  margin-top: 1.9vw;
  box-sizing: border-box;
  border: solid 2px rgb(229, 233, 239);
  border-radius: 10px;
  padding: 2.5vw;
  user-select: none;

  display: flex;
  justify-content: space-between;
  align-items: center;
}


.wrapper .food li .left {
  display: flex;
  align-items: center;
}

.wrapper .food li .left img {
  width: 13vw;
  height: 15vw;
}

.wrapper .food li .left .info {
  margin-left: 3vw;
}

.wrapper .food li .left .info h3 {
  font-size: 3.8vw;
  color: #555;
}

.wrapper .food li .left .info p {
  font-size: 3vw;
  color: #888;
  margin-top: 1vw;
}

.wrapper .food li .right {
  width: 16vw;

  display: flex;
  justify-content: space-between;
  align-items: center;
}

.wrapper .food li .right .fa-minus-circle {
  font-size: 5.5vw;
  color: #999;
  cursor: pointer;
}

.wrapper .food li .right p {
  font-size: 3.6vw;
  color: #333;
}

.wrapper .food li .right .fa-plus-circle {
  font-size: 5.5vw;
  color: #0097EF;
  cursor: pointer;
}

/**************************购物车**************************/
.wrapper .cart {
  width: 100%;
  height: 14vw;

  position: fixed;
  left: 0;
  bottom: 0;

  display: flex;
}

.wrapper .cart .left {
  flex: 2;
  background-color: #505051;

  display: flex;
}

.wrapper .cart .left .icon {
  width: 16vw;
  height: 16vw;
  box-sizing: border-box;
  border: solid 1.6vw #444;
  border-radius: 8vw;
  background-color: #3190E8;
  font-size: 7vw;
  color: #fff;

  display: flex;
  justify-content: center;
  align-items: center;

  margin-top: -4vw;
  margin-left: 3vw;

  position: relative;
}

.wrapper .cart .left .icon .quantity {
  width: 5vw;
  height: 5vw;
  border-radius: 2.5vw;
  background-color: red;
  color: #fff;
  font-size: 3.6vw;

  display: flex;
  justify-content: center;
  align-items: center;

  position: absolute;
  right: -1.5vw;
  top: -1.5vw;
}

.wrapper .cart .left .info p:first-child {
  font-size: 4.5vw;
  color: #fff;
  margin-top: 1vw;
}

.wrapper .cart .left .info p:last-child {
  font-size: 2.8vw;
  color: #AAA;
}

.wrapper .cart .right {
  flex: 1;
}

/**达到起送费**/

.wrapper .cart .right .twosituations {
  background-color: #38CA73;
  width: 100%;
  height: 100%;
  color: #fff;
  font-size: 4.5vw;
  font-weight: 700;
  user-select: none;
  cursor: pointer;

  display: flex;
  justify-content: center;
  align-items: center;
}
</style>